// 登录页
<template>

    <div class="sign-in">
      
        <div class="top-nav">
            <nav>
                
                <a href="http://www.csjbx.com/index.html">
                    官方首页
                </a>

                <a href="http://csjmob.kbao360.com/service/downloadapp">
                    移动APP
                </a>

                <a href="">
                    公众号
                </a>
                
            </nav>
        </div>

        <div class="video">
            <video autoplay='autoplay' preload :src="videoPath" muted loop>
            </video>
        </div>

        <div class="version">
            版本号：bate2.0-033
        </div>

        <div class="content">

            <div class="sign-form">
                
                <div class="container">

                    <div class="header">
                        
                        <div class="name">
                            <div class="logo">
                                <img :src="logo" alt="logo">
                            </div>
                            <h1 class="title">
                                创世纪管理系统
                            </h1>
                        </div>

                        <p class="slogan">
                        Chuang Shi Ji 
                        Management System
                        </p>
                                                
                    </div>
                    
                    <AutoComplete  placeholder="登录账号" on-select='select' class='username'  @on-search='handleSearch' v-model='form.username'> 

                        <Option :value='item.account' v-for='item of currentUsername' :key='item.account'>

                            <div class="account">

                                <span class="phone">
                                    {{item.account}}
                                </span>
                                <span class="nickname">
                                    {{item.username}}
                                </span>

                            </div>
                                
                        </Option>

                    </AutoComplete> 
                    
                    <Input type='password' class="password" placeholder="登录密码" v-model="form.password" >
                    </Input>

                    <Button @click='login' class="btn-sign" type='primary' long> 登录 </Button>
                    
                </div>
                
            </div>
        
        </div>
        
    </div>

</template>

<script lang='ts'>
import { Component, Vue, Model } from 'vue-property-decorator'
import {mapState, mapActions, mapGetters} from 'vuex'
import imgsPath from '@/img_path.json'
import schema from 'async-validator';
import * as validateFn from '@/utils/validate/index'


@Component({
    
    computed: {
        ...mapGetters('localStore', ['accountsList'])
    },
})
export default class signIn extends Vue{
    name:string = 'singIn'

    form = {
        username: '',
        password: '',
    };

    logo:string = imgsPath.logo
    
    videoPath = '../../static/home.mp4'

    // 账号仓库
    accountsList:any
    
    // 当前匹配可选账号列表
    currentUsername = []

    // 匹配可选账号
    handleSearch(value){

        let cache = []

        this.accountsList.forEach(item =>{
            
            if(item.account.match(value)){
                cache.push(item)
            }
            
        })

        this.currentUsername = cache;
        
    }

    select(value){
        this['form']['username'] = value.username;
    }

    // 验证
    validate(data){

        let hasError = false;
        let _vue:any = this;
        let conf = {

            username: [
                {required: true, type: 'string', message: '请输入登录账号'},
                {validator: validateFn.account, required: true}
            ],

            password: [
                { required: true, type: 'string', message: '请输入登录密码' }
            ]
            
        }

        var validator:any = new schema(conf);

        validator.validate(data, (errors) =>{

            if(errors &&  errors.length){

                hasError = true;

                let cache = ''
                
                errors.forEach(err =>{
                    cache = `${cache} ${ cache ? '/' : '' } ${err.message}`;
                })

                
                _vue.$Notice.warning({

                    title: '登录错误',
                    desc: cache

                })

            }

        })

        return hasError;
        
    }

    login (){

        let _vue = this;
        let {username, password} = this.form;
        let hasError = this.validate(this.form);

        if( password && !hasError ){

             this.$store.dispatch('request', {

                url: 'post/token/id',
                data: _vue.form,

            }).then(sucess =>{
                
                if(sucess){
                    
                    // 页面跳转
                    _vue.$router.push('/home')

                }
            })
            
        }
        
       
        
    }
    
    // 配置视频
    mounted (){
        
        let video:any = document.getElementsByTagName('video')[0];
        video.playbackRate = 0.34

    }

    
    beforeDestroy () {

        const _vue:any = this;
        _vue.choicesSelect.destroy()
    }

}

</script>

<style lang='scss'>

.sign-in{

    height: 100%;

    .ivu-input-group-prepend{
        background: $block_bg_color;
    }

    .password{
        margin-top: _intervals(2);
    }

    .btn-sign{
        margin-top: _intervals(3);
    }

.video{
    
    overflow: hidden;
    height: 100%;

    video{
        margin: auto;
        width: 100%;
    }
}


.content{

    @extend %position_center;
    padding: _rem(20px);
     
}
.sign-form{
    position: relative;
    $w: _rem(780px);
    flex: 0 $w;
    margin: auto;
    width: $w;
    height: 100%;
    z-index: 99;

    .container{
        @extend %position_center;

        padding: 0 _rem(10px);
        width: _rem(340px);
        height: _rem(400px);
    }

    .account{
        display: flex;
        justify-content: space-around;
        align-items: center;

        span{
            flex: 1;
            display: inline-block;
        }
        
        .nickname{
            text-align: right;
        }

        
        
    }

    .header{
        margin-bottom: _rem(42px);
    }

    .name{
        display: flex;
        align-items: center;
        color: $font_light_color;
    }
    .icon{
        font-size: _rem(22px);
    }

    .title{
        padding-left: _intervals();
        font-size: _rem(26px);
        font-weight: 500;
       
    }

    .slogan{
        margin-left: _rem(50px);
        font-size: $font_mini;
        color: $font_light_color;
    }
    
    .logo{
        @extend %img_box;
        $size: _rem(40px);

        flex: 0 $size;
        
        width: $size;
        height: $size;
    }

    
    
}

.version{
    position: absolute;
    bottom: _intervals();
    right: _intervals();

    font-size: $font_small;
    color: $font_light_color;
    
}


.top-nav{
    $size: _rem(40px);
    position: absolute;
    top: 0;
    left: _intervals(2);
    
    margin: auto;
    padding: 0  _intervals();
    height: $size;

    font-size: $font_md;
    line-height: $size;
    z-index: 999;
   

    a{
        position: relative;
        display: inline-block;
        color: $font_light_color;

        &::before{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: _intervals(-1);
            margin: auto;
            width: 90%;
            height: _rem(1px);
            transition: all $transition_time;
        }


       
    }

    a:hover{

         &::before{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 90%;
            height: _rem(2px);
            background: $block_bg_color;
        }
    }

    a + a{
        margin-left: _intervals(2);
    }

  
}

}




</style>